<template>
    <div>
        <!-- 搜索与添加区域 -->
        <el-row>
            <el-col :span="12">
                <el-input placeholder="请输入用户ID" v-model="queryInfo.queryId" clearable @clear="getUserList">
                </el-input>
            </el-col>
            <el-col :span="3">
               <el-button slot="append"  @click="getUserListById">搜索</el-button>
            </el-col>
            <!-- <el-col :span="6">
                <el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
            </el-col> -->
        </el-row>
        <!-- 表格区域-->
        <el-table :data="userInfo" border style="width: 100%" stripe>
            <el-table-column prop="id" label="ID" width="100" />
            <el-table-column prop="username" label="用户名" width="100" />
            <el-table-column prop="age" label="年龄" width="100" />
            <el-table-column prop="sex" label="性别" width="100" />
            <el-table-column prop="phone" label="电话号码" width="180" />
            <el-table-column prop="email" label="邮箱" width="180" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="editUser(scope.row.id)">编辑</el-button>
                    <el-popconfirm title="是否确认删除?" @confirm="removeUser(scope.row.id)" >
                        <template #reference>
                            <el-button type="danger" >删除</el-button>
                        </template>
                    </el-popconfirm>
                    <el-button size="small" @click="findtUserOrder(scope.row.id)">查询用户订单</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.current"
            :page-sizes="[3, 5, 8]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        <!-- 对话框 -->
        <el-dialog v-model="addDialogVisible" title="添加用户" width="30%" :before-close="handleClose">
            <el-form :model="userForm" label-width="120px">
                <el-form-item label="用户名">
                <el-input v-model="userForm.username" />
                </el-form-item>
                <el-form-item label="密码">
                <el-input v-model="userForm.password" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addUser">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 修改用户信息对话框 -->
        <el-dialog v-model="editDialogVisible" title="修改用户" width="30%" :before-close="handleClose">
            <el-form :model="userForm" label-width="120px">
                <el-form-item label="用户名">
                <el-input v-model="userForm.username" />
                </el-form-item>
                <el-form-item label="密码">
                <el-input v-model="userForm.password" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editDialogVisible= false">取消</el-button>
                    <el-button type="primary" @click="saveEdit">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 用户订单信息 -->
        <el-dialog v-model="orderDialogVisible" title="用户订单信息" width="30%" center>
            <ul v-for="order in userOrder.orders" :key="order.id">
              <li>{{order.items}}</li>
              <li>{{order.amount}}</li>
            </ul>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="orderDialogVisible = false">关闭</el-button>
            </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>

export default {
    data() {
        return {
            userInfo:'',
            total:'',
            userOrder:'', 
            queryInfo:{
              queryId:'',
              current:1,
              pagesize:3
            },
            userForm: {
                id:'',
                username:'',
                password:'',
            },
            addDialogVisible: false,
            editDialogVisible:false,
            orderDialogVisible:false

        }
    },
    mounted(){
       this.getUserList()
    },
    methods:{
        // 获取用户列表
        async getUserList(){
          let result =await this.$http.get('/find',{params:{i:this.queryInfo.current,j:this.queryInfo.pagesize}})
        //   console.log(result)
          this.userInfo=result.records
          this.total=result.total
        },
        // 根据Id查询用户
        async getUserListById(){
         const result=  await this.$http.get('/users',{params:{id:this.queryInfo.queryId}})
        //   console.log(result);
          this.userInfo=result
        },
        // 添加用户
        async addUser(){
          const result= await this.$http.post('/user',this.userForm)
            // console.log(result);
           this.getUserList()
           this.addDialogVisible =false
        },
        // 删除用户
        async removeUser(id){
          await this.$http.delete('/user',{params:{id:id}})
          this.getUserList()
        },
        // 打开编辑
        editUser(id){
          this.editDialogVisible=true
          this.userForm.id=id   
        },
        //确定编辑修改用户信息
        async saveEdit(){
            await this.$http.put('/user',this.userForm)
            this.getUserList()
            this.editDialogVisible =false
        },
        // 关闭对话框重置表单
        handleClose(){
            this.userForm=''
        },
        //
        handleSizeChange (val){
           this.queryInfo.pagesize=val
           this.getUserList()
        },
        handleCurrentChange (val)  {
           this.queryInfo.current=val
           this.getUserList()
        },
        // 查询该用户的订单
        async findtUserOrder(id){
            this.orderDialogVisible=true
          const result=await this.$http.get('/user/findid',{params:{id}})
          console.log(result);
          this.userOrder=result[0]
        }
        
        
    }

}   
</script>

<style>
    .el-pagination{
        margin-left: 200px;
    }
</style>
  